// 入口函数
$(function () {
    //     1. 找到`id=title`的标题
    // 2. 给其注册`onkeydown`事件
    $('#title').on('keydown', function (e) {
      // 3.判断按下的按键是不是回车键
      if (e.keyCode === 13) {
        // 4. 获取输入框里面的内容
        var value = $(this).val().trim()
  
        // 5. 判断是否有内容
        if (value.length === 0) {
          return alert('请输入内容')
        }
  
        // 需要准备一个对象来存储数据
        var obj = {
          title: value,
          done: false
        }
  
        // 调用这个函数
        var data = getData()
        // 将对象存储到数组中 `push`方法
        data.push(obj)
        // 将数组存储本地存储中
        setData()
        // 调用 render函数
        render()
        $(this).val('')
      }
    })
  
    // 判断是否是第一次来存储数据 如果是第一次就给其一个空数组 如果不是的 我们就需要将本地存储里面的已有数据读取出来
    function getData() {
      return JSON.parse(window.localStorage.getItem('todolist')) || []
    }
  
    // 定义一个函数用于将数据渲染到页面
    function render() {
      // 1.从本地存储中读取数据
      var data = getData()
      var ol = '' // 表示用于存储未完成
      var ul = '' // 表示用于存储已完成
      // 遍历数据
      $.each(data, function (key, item) {
        // 判断任务是否是已经完成
        if (item.done) {
          ul += `
          <li>
              <input type="checkbox" checked>
              <p>${item.title}</p>
              <a href="javascript:;" data-index="${key}"></a>
          </li>
      `
        } else {
          ol += `
              <li>
                  <input type="checkbox">
                  <p>${item.title}</p>
                  <a href="javascript:;" data-index="${key}"></a>
              </li>
          `
        }
      })
      $('ol').html(ol)
      $('ul').html(ul)
    }
    render()
  
    $('ul,ol').on('click', 'input', function () {
      // 获取input的check属性的值
      var checked = $(this).prop('checked')
      // 获取本地存储的数据
      var data = getData()
      // 获取到index
      var index = $(this).siblings('a').attr('data-index')
      data[index].done = checked
      // 再次写入到本地存储中
      setData()
      render()
    })
  
    $('ul,ol').on('click', 'a', function () {
      // 提示用户要不要删除
      if (window.confirm('是否要删除')) {
        var index = $(this).attr('data-index')
        var data = getData()
        // 删除数据里面的元素
        data.splice(index, 1)
        setData()
        render()
      }
    })
  
    function setData() {
      window.localStorage.setItem('todolist', JSON.stringify(data))
    }
  })